<template>
    <div id="pag">
            <div id="daohang">
                <span id="shou" @click="btnClick" class="fa fa-chevron-left "></span>
                <input type="text" id="in">
                
                <span>搜索</span>
            </div>
            <div id="fen">
          <span class="fa fa-list-ul"> </span>    <span> 分类</span><span> ────────────────────────</span>
          </div>
            <div id="shaoer">
              
                <br>
                
                <div class="f1"> <router-link :to="{path:'/Genre/name',query:{type:'经济管理'}}"><span>经济管理</span>  </router-link></div>
                <div class="f1"><router-link :to="{path:'/Genre/name',query:{type:'励志与成功'}}"> 励志与成功</router-link></div>
                <div class="f1"><router-link :to="{path:'/Genre/name',query:{type:'文学小说'}}">文学小说 </router-link></div>  
            </div>
            <div id="shao">
                <div class="f2"><router-link :to="{path:'/Genre/name',query:{type:'学习考试'}}">学习考试 </router-link></div>
                <div class="f2"><router-link :to="{path:'/Genre/name',query:{type:'家庭教育'}}">家庭教育 </router-link></div>
                <div class="f2"><router-link to="/Genre/name">所有书籍 </router-link></div>
               
            </div>
    </div>
</template>

<script>
export default {
    methods:{
        btnClick:function(){
            location.href="#/"
        }
    }

}
</script>

<style scoped>
    a{
        color: black;
        text-decoration:none;
    }
    #pag{
        width: 100vw;
        height: 100vh;
        background-color: #DDDDDD;
    }
    #daohang{
        
        width: 100%;
        height: 50px;
        background-color: white;

    }
    #shou{
         cursor: pointer;
        padding-left: 8px;
        font-size: 15px;
        color: red;
    }
    #in{
        /*padding-top: 10px;*/

        width: 75vw;
        height:30px;
    }
    #shaoer{
        margin: 10px;
        display: flex;
    
    }
    #shao{
       
        /*margin-top: 5px;*/
        margin: 10px;
        display: flex;
    }
    .f1{
        color: #666666;
        line-height: 30px;
        text-align: center;
        border: solid 1px #DDDDDD;
        background-color: white;
        width: 33%;
        height: 30px;
    }
     .f2{
         
         color: #666666;
         line-height: 30px;
          text-align: center;
         border: solid 2px #DDDDDD;
        background-color: white;
        width: 33%;
        height: 30px;
    }
     #f3{
         line-height: 30px;
          text-align: center;
         border: solid 1px #DDDDDD;
        background-color: white;
        flex: 1;
        height: 30px;
    }
    #fen{
        margin: 8px;
        color: #666;
    }


</style>